<script setup lang="ts">
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import {
  message,
  Input,
  DatePicker,
  RangePicker,
  Button,
} from 'ant-design-vue';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getMaterialActionLogList } from '#/api/backend/materialStockDetail';
import dayjs from 'dayjs';
import { useDebounceFn } from '@vueuse/core';
import { useVbenForm } from '#/adapter/form';

const data = ref<any>({});
const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  showDefaultActions: false,
  submitOnChange: false,
  handleSubmit: async (values: Record<string, any>) => {
    if (gridApi) {
      gridApi.reload();
    }
  },
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      fieldName: 'quick_search',
      label: '快捷搜索',
      // operator: '=',
    },
    {
      component: 'RangePicker',
      fieldName: 'created_time',
      label: '时间',
      operator: 'RANGE',
      render: 'datetime',
      componentProps: {
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD',
      },
    },
  ],
  wrapperClass: 'grid-cols-4',
});

const [Modal, modalApi] = useVbenModal({
  class: 'w-4/5',
  onCancel() {
    modalApi.close();
  },
  onConfirm() {
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      data.value = modalApi.getData<Record<string, any>>();
      if (gridApi) {
        // gridApi.reload()
      }
    }
  },
});

interface MaterialActionLogRow {
  id: number;
  created_time: string;
  warehouse: {
    warehouse_name: string;
  };
  material: {
    material_name: string;
  };
  materialSku: {
    sku_sn: string;
  };
  action_num: number;
  new_num: number;
  action_type: number;
  sync_aef: number;
  order_no: string;
  template_no: string;
  remark: string;
}

// 库存明细表格配置
const stockDetailGridOptions: VxeTableGridOptions<MaterialActionLogRow> = {
  border: true,
  rowConfig: { useKey: true, keyField: 'id' },
  columnConfig: { useKey: true },
  minHeight: '400px',
  keepSource: true,
  columns: [
    { minWidth:70, title: '序号', type: 'seq', width: 40 },
    { field: 'warehouse.warehouse_name', minWidth:100, title: '仓库' },
    { field: 'material.material_name', minWidth:200, title: '面料名称' },
    { field: 'materialSku.sku_sn', minWidth:70, title: '面料编码' },
    { field: 'action_num', minWidth:60, title: '变动数量' },
    { field: 'new_num', minWidth:60, title: '变动后数量' },
    {
      field: 'action_type',
      minWidth:50, title: '类型',
      formatter: ({ cellValue }) => {
        const types = {
          1: '采购入库',
          2: '销售出库',
          3: '库存调整',
          4: '盘点调整',
        };
        return types[cellValue as keyof typeof types] || cellValue;
      },
    },
    {
      field: 'sync_aef',

      minWidth:70, title: '是否同步阿尔法',
      formatter: ({ cellValue }) => {
        return cellValue === 1 ? '已同步' : '未同步';
      },
    },
    { field: 'order_no', minWidth:70, title: '单号' },
    { field: 'template_no', minWidth:70, title: '单号简码' },
    { field: 'remark', minWidth:70, title: '备注' },
    {
      field: 'created_time',
      minWidth:70, title: '创建时间',
      formatter: ({ cellValue }) => {
        if (cellValue) {
          return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss');
        }
        return '-';
      },
    },
  ],
  pagerConfig: { pageSize: 20 },
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        if (!data.value?.materialSkuId || !data.value?.warehouseId) {
          return { items: [], total: 0 };
        }
        const getValues = await formApi.getValues();
        const search = await formApi.getFiltersValues();
        const { list, total } = await getMaterialActionLogList({
          page: page.currentPage,
          limit: page.pageSize,
          params: {
            'material_action_log.material_sku_id': data.value.materialSkuId,
            'material_action_log.warehouse_id': data.value.warehouseId,
          },
          quick_search: getValues.quick_search,
          search,
          order: 'created_time,desc',
        });
        return { items: list, total: total };
      },
    },
  },
  showOverflow: false,
  sortConfig: {
    defaultSort: { field: 'created_time', order: 'desc' },
    remote: true,
  },
  exportConfig: {},
};

// 初始化库存明细表格
const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions: stockDetailGridOptions,
});
</script>

<template>
  <Modal title="库存明细">
    <Form />
    <Grid></Grid>
  </Modal>
</template>
